@math.gl/web-mercator

What is @math.gl/web-mercator?

@math.gl/web-mercator is a JavaScript library that provides utilities for working with Web Mercator projections. It is part of the math.gl suite of libraries and is designed to facilitate geographic calculations and transformations, particularly for mapping and visualization applications.

What are @math.gl/web-mercator's main functionalities?

Project geographic coordinates to Web Mercator

This feature allows you to project geographic coordinates (longitude and latitude) to Web Mercator coordinates. The code sample demonstrates how to create a WebMercatorViewport and project a specific geographic coordinate to Web Mercator coordinates.

const { WebMercatorViewport } = require('@math.gl/web-mercator');

const viewport = new WebMercatorViewport({
  width: 800,
  height: 600,
  longitude: -122.45,
  latitude: 37.78,
  zoom: 12
});

const [x, y] = viewport.project([-122.45, 37.78]);
console.log(`Projected coordinates: (${x}, ${y})`);

Unproject Web Mercator coordinates to geographic coordinates

This feature allows you to unproject Web Mercator coordinates back to geographic coordinates (longitude and latitude). The code sample demonstrates how to create a WebMercatorViewport and unproject a specific Web Mercator coordinate to geographic coordinates.

const { WebMercatorViewport } = require('@math.gl/web-mercator');

const viewport = new WebMercatorViewport({
  width: 800,
  height: 600,
  longitude: -122.45,
  latitude: 37.78,
  zoom: 12
});

const [longitude, latitude] = viewport.unproject([400, 300]);
console.log(`Geographic coordinates: (${longitude}, ${latitude})`);

Calculate the bounding box of a viewport

This feature allows you to calculate the geographic bounding box of a viewport. The code sample demonstrates how to create a WebMercatorViewport and get the bounding box of the viewport.

const { WebMercatorViewport } = require('@math.gl/web-mercator');

const viewport = new WebMercatorViewport({
  width: 800,
  height: 600,
  longitude: -122.45,
  latitude: 37.78,
  zoom: 12
});

const bounds = viewport.getBounds();
console.log(`Bounding box: ${JSON.stringify(bounds)}`);

Other packages similar to @math.gl/web-mercator

proj4

Proj4 is a JavaScript library for cartographic projections and coordinate transformations. It supports a wide range of projections and is highly configurable. Compared to @math.gl/web-mercator, proj4 offers more flexibility and a broader range of projections, but it may be more complex to use for simple Web Mercator transformations.

d3-geo

D3-geo is a module of the D3.js library that provides geographic projections and transformations. It is well-integrated with the D3 ecosystem and is suitable for creating complex visualizations. Compared to @math.gl/web-mercator, d3-geo offers more visualization capabilities but may require more setup for basic Web Mercator transformations.

mapbox-gl

Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It includes built-in support for Web Mercator projections and provides a rich set of features for map rendering and interaction. Compared to @math.gl/web-mercator, Mapbox GL JS is more focused on map rendering and interaction, while @math.gl/web-mercator is more focused on the mathematical aspects of projections.

README

@math.gl/web-mercator

math.gl is a suite of math modules for 3D and geospatial applications.

This module contains utilities for perspective-enabled Web Mercator projections.

For documentation please visit the website.

Changelog

3.6.3

• [web-mercator] Fix reverse top/bottom padding in fitBounds (#302)